
.cardCenter {
  width: 100%;
  height: 1.497585rem;  
  border: .024155rem solid #19CAD9;
  opacity: 1;
  border-radius: .183575rem;
  margin: .241546rem 0 .483092rem 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .193237rem 0;
  font-size: .31401rem;
  box-sizing: border-box;
  margin: 0 auto;
}
/* .5rem == 30px */
.cardItem {
  flex: 1;
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
  height: 100%;
}
.cardItem:first-child {
  border-right: 1px solid #19C9DA;
}
.tcolor {
  color: #19C9DA !important;
  padding-bottom: 5px !important;
}



.vipCardContainer {
  background-color: white;
  height: 100%;
}

.vipCardBg {
  width: 100%;
  border-radius: 0.2rem;
  display: block;
  position: relative;
}
.vipLogo{
  position: absolute;
  top: .483092rem;
  left: 0.638164rem;;
  width: 3.478261rem;
  height: 1.062802rem;
}
.bindCardTitle {
  position: absolute;
  top: 1.690821rem;
  left: 1.690821rem;
  color: #fff;
  font-size: .289855rem;
  margin: 0;
}
.vipCard {
  position: absolute;
  margin-top: 0.4rem;
  margin-left: 0.5rem;
}

.vipCardHead {
  width: 0.8rem;
  height: 0.8rem;
  background-color: white;
  border-radius: 50% 50%;
  text-align: center;
  float: left;
}

.vipCardHeadImg {
  width: 80%;
}

.vipCardName{
  float: left;
  color: #ffffff;
  margin-left: 0.2rem;
}

.vipCardName1{
  font-weight: bold;
  margin-top: 0.01rem;
}

.vipCardName2{
  font-size: 0.1rem;
  margin-top: 0.1rem;
}

.vipCardNo{
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  color: #ffffff;
  text-shadow: 0.02rem 0.01rem 0.04rem #000000;
}

.vipCardNo1{
  font-size: 0.2rem;
}

.vipCardNo2{
  vertical-align: top;
  font-size: 0.4rem;
}

.remainAcc{
  text-align: center;
  font-size: 0.4rem;
}

.remainAcc1{

}

.remainAcc2{
  margin-left: 0.3rem;
  color: green;
}

.infoHead {
  text-align: center;
  font-size: 0.3rem;
}

.infoBody {
  text-align: center;
  font-size: 0.4rem;
  color: green;
}

.infoPending {
  color: gray;
}

.infoIcon {
  text-align: center;
  font-size: 0.3rem;
}

.infoIcon1 {
  display: inline-block;
  width: 80%;
  min-height: 1.3rem;
  background-image: url(../assets/vipcard/vip.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}

.infoIcon2 {
  display: inline-block;
  width: 80%;
  min-height: 1.3rem;
  background-image: url(../assets/vipcard/sms.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}

.infoIcon3 {
  display: inline-block;
  width: 80%;
  min-height: 1.3rem;
  background-image: url(../assets/vipcard/barcode.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}

.infoIconText {
  text-align: center;
  font-size: 0.28rem;
  color: #999999;
}

.infoIconLimit {
  background-image: url(../assets/vipcard/sms2.png);
}

.vipType1 {
  margin-bottom: .1rem;
  line-height: 1.4;
  font-size: .32rem;
  display: block;
}

.cardCode {
  position: absolute;
  top: .5rem;
  right: .5rem;

  width: .65rem;
  height: .65rem;

  display: block;
}

.infoTimeLimit {
  color: black;
}

.cardInfo {
  position: absolute;
  top: .5rem;
  left: .5rem;
}

.csn {
  font-size: .33rem;
  font-weight: 400;
  color: #FFF;
  display: block;
  line-height: 1.4;
}

.cst {
  line-height: 1.4;
  font-size: .3rem;
  font-weight: 350;
  color: #FFF;
  display: block;
}

:global {
  html, body, #root {
    background-color: #ffffff;
  }

  // #root > div {
  //   height:100%
  // }

  .couponContainer {
    height: 100%;
  }

  // .barcodeContainer {
  //   height: 100%;
  // }

  .vipRightsContainer {
    height: 100%;
  }

  .viprights-modal .am-modal-content {
    background: rgba(255, 255, 255, 0.9);
  }

  .bindWrapper {
    background-color: #ffffff;
    height: 100%;
    .bindWrapperInner {
      min-height: 100%;
      margin-bottom: -2.5rem;
    }

    .bindCardImg {
      text-align: center;
      background-image: url(../assets/vipcard/card_img_bg.jpg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }

    .customCardImg {
      padding: 0.2rem 0.3rem;

      img {
        border-radius: 0.3rem;
      }
    }
    :global {
      .am-list-item .am-input-control input {
        text-align: left;
      }
      .am-list-item.am-input-item {
        height: 1.086957rem;
      }
      .bindBody .codeBtn {
        height: 1.089957rem;
        line-height: 1.089957rem;
        font-size: .410628rem;
        letter-spacing: .024155rem;
     }
     .am-input-control input::-webkit-input-placeholder {
        font-size: .410628rem;
     }
     .bindBody .am-button {
       height: 1.09rem;
       line-height: 1.086957rem;
       font-size: .434783rem;
     }

    }
  }

  .bindBody { 
    margin-top: 0.3rem;
    padding-left: .57971rem;
    padding-right: .57971rem;
    padding-top: .241546rem;
    .am-list-item.am-input-item {
      border: none;
      border-bottom: 1px solid #00afce;
      border-left: 1px solid #00afce;
    }

    .am-list-item.am-input-item:after {
      border-bottom: none;
    }

    .am-list-item .am-input-label.am-input-label-5 {
      width: 0.5rem;
    }

    .am-button {
      height: 0.88rem;
      line-height: 0.88rem;
      border-radius: 0.8rem;
      background-color: #00afce;
      border: 1px solid #00afce;
    }

    .am-button > span {
      color: #ffffff;
    }

    .am-list-item .am-input-control input {
      font-size: 0.3rem;
    }

    .am-button-disabled {
      background-color: #e6e6e6;
      border: 0.01rem solid #e6e6e6;
    }

    .am-button-disabled > span {
      color: #b3b3b3;
    }

    .codeBtn {
      font-size: 0.3rem;
      background-color: white;
      border: none;
      border-radius: 0;
      font-weight: bold !important;
      border-bottom: 1px solid #19CAD9;
      border-right: 1px solid #19CAD9;
      height: 100%;

      span {
        color: #00afce;
      }
    }
  }

  .cardSelector {
    .am-popup-slide-down {
      bottom: 0;
      background-color: #ebf0f2;
    }

    .am-list-body {
      background-color: #ebf0f2;
      padding-top: 0.2rem;
    }
    .am-list-item {
      background-color: #ebf0f2;
    }
    .am-list-header {
      background-color: white;
    }
  }
}

.cardImg {
  width: 100%;
  height: 5.024155rem;
}

.bindBtn {
  margin-top: 0.3rem;
  background-image: linear-gradient(to bottom, #12D5C8, #19C9DA);
  border: none !important ;
  margin: 0 auto !important;
}

.regBtn {
  background-color: #ffffff !important;
  border: 1px solid #19CAD9 !important;
  color: #19CAD9 !important;
}

.regBtn > span {
  color: #00afce !important;
}

.codeRow {

}

.codeInputWrapper {
  float: left;
  width: 60%;
}

.codeBtnWrapper {
  float: right;
  width: 40%;
  border: none;
  color: #19CAD9 !important;
  font-size: .410628rem;
  font-weight: bold !important;
}

.vipFormPush {
  width: 100%;
  height: 2.5rem;
}

.footer {
  width: 100%;
  height: 2.5rem;
}

.accCodeBtn {
  display: inline-block;
  width: 35%;
  height: 0.6rem;
  line-height: 0.6rem;
  font-size: 0.3rem;
}

.topItemRow {
  margin-top: 0.2rem;
}

.blankRow {
  height: 0.2rem;
  background-color: #f5f5f5;
}
.bodyItemRow1 {
  margin-top: 0.3rem;
  margin-bottom: 0.4rem;
  min-height: 3.816425rem;
  border:.024155rem solid #3AD2DE;
  border-radius: .289855rem;
  padding: 0 5px;
  overflow: hidden;
}
/*  */
.bodyItemRow2 {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}

.tailItemRow {
  margin-top: 0.4rem;
}

.imMessage {
  height: 100%;
  padding-bottom: 0;
}

.accList {
  height: 100%;
}

.inputItem {
  background: #FFFFFF !important;
  border: 1px solid #19CAD9 !important;
  border-radius: 2px !important;
  margin-top: .483092rem;
}

.am-list-item .am-input-item {
  border: none !important;
}

.cardcss {
  padding: .724638rem .724638rem 0 .724638rem;
}

@themeColor: #16CCD4;
/* footerWrap */
.f-b {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footerWrap {
  padding: 0 .724638rem;
  margin-top: 1.449275rem;
  margin-bottom: .57971rem;
  .footerTitle {
    color: @themeColor;
    height: .531401rem;
    display: flex;
    justify-content: center;
    align-items: center;
    >span:first-child, span:last-child{
       width: 2.898551rem;
       height: 1px;
       background-color: @themeColor;
       flex: 1;
    }
    span:nth-child(2) {
      padding: 0 .591787rem;
      font-size: .386473rem;
    }
  }
  .footerInfo {
    color: #333333;
    font-size: .338164rem;
    text-align: center;
    >.footItem1 {
     padding-top: .241546rem;
    }
    .footItem2 {
      padding: .096618rem .603865rem 0 1.03865rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        position: relative;
      }
      span::before {
        content: '';
        width: .31401rem;
        height: .193237rem;
        background-color: @themeColor;
        border-radius: .096618rem;
        position: absolute;
        left: -0.457rem;
        top: 0.130618rem;
      }
    }
  }
}

.f-c() {
  display: flex;
  justify-content: center;
  align-items: center;
}
.f-c-c() {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}
.rowWrap {
   @themeColor: #19C9DA;
   font-size: .386473rem;
   min-height: 2.777778rem;
  .f-c();
  .rowItem {
    min-height: .966184rem;
    .f-c-c();
    flex: 1;
    padding: 0 .289855rem;
    font-weight: bold;
    >span {
      color: @themeColor;
      width: 100%;
      text-align: center;
      vertical-align: bottom;
    }
    span:first-child {
       font-size: .410628rem;
    }
    span:last-child {
      color: #333;
      padding: .096618rem;
    }
  }
  .rowItem:nth-child(3) {
    border-right: .019324rem solid @themeColor;
  }
  .rowItem:nth-child(4) {
    span:first-child {
      vertical-align: -3px;
    }
  }
}

.rowWrap2 {
  width: 100%;
  min-height: 1.497585rem;  
  border: .024155rem solid #19CAD9;
  opacity: 1;
  border-radius: .289855rem;
  margin: .241546rem 0 .483092rem 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .193237rem 0;
  font-size: .31401rem;
  box-sizing: border-box;
  margin: 0 auto;
  .f-c-c();
  .row2Item:first-child {
    .f-c();
    justify-content: flex-start;
    border-bottom: .024155rem solid #19CAD9;
    width: 100%;
    padding: .193237rem 0;
    >span:first-child {
      width: .31401rem;
      height: .193237rem;
      background: #19CAD9;
      border-radius: .096618rem;
      margin: 0 .193237rem;
    };
    span:nth-child(2) {
      font-size: .410628rem;
      font-weight: bold;
      margin-right: .241546rem;
    }
    span:nth-child(3) {
      color: #666666;
      font-size: .289855rem;
      padding: 3px 0 0;
    }
  }
  .row2Item:last-child {
    .f-c();
    .item2 {
      .f-c-c();
      text-align: center;
      font-size: .338164rem;
      color: #333;
      div {
        padding-top: .072464rem;
      }
      .line {
        .f-c();
      }
     }
    padding: .463768rem 0;
    .rowLine {
      /* box-sizing: border-box; */
      padding: 0 .141546rem;
      width: 1.618357rem;
      height: .4rem;
      span {
        display: block;
        width: 100%;
        height: .019324rem;
        background-color:#E5E5E5;
        margin: 0 .241546rem;
        box-sizing: border-box;
        margin: 0 auto;
      }
    }
  }
}